import React, { useEffect } from 'react'
import Myevents from "../utils/events.js"
import { Swiper,Toast } from 'react-vant';
import "../style/index.scss"
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
// 当子组件是一个函数组件的时候，子组件接受的数据在父组件的的props种
// 子组件要修改父组件的数据
// react 是单向数据刘，也就是说子组件不能主动的给父组件传递数据
// 如果子组件想要修改父组件的数据，需要父组件给子组件传递一个方法，子组件调用调用父组件的方法
function Appfn(props) {
    console.log(props);
    let fn = () => {
        props.sonsendfa([{ name: "lisi" }, { name: "wangwu" }])
    }
    useEffect(() => {
        Myevents.addListener("zhao", (data) => { console.log(data); })
    }, [])
    return (
        <div>{props.send}
            {
                props.arr && props.arr.length ? props.arr.map((item, index) => {
                    return <div key={index}>{item.name}</div>
                }) : ""
            }
            <button onClick={fn}>修改父组件的数据</button>
            <h1>{props.send1}</h1>

            <div className="demo-swiper">
                <Swiper autoplay={5000}>
                    {
                      
                      colors.map((color, index) => (
                        <Swiper.Item key={color}>
                          <div
                            onClick={() => {
                              Toast.info(`你点击了卡片 ${index + 1}`)
                            }}
                          >
                            {index + 1}
                          </div>
                        </Swiper.Item>
                      ))
                      
                    }
                </Swiper>
            </div>
        </div>
    )
}

export default Appfn